<template>
	<el-dialog title="查看考试答案" :visible.sync="dialogVisible" fullscreen append-to-body class="course_exam_dialog">
		<div class="course_exam_content">
			<el-scrollbar>
				<h1>{{ examData.name }}</h1>
				<el-row :gutter="16">
					<el-col :span="12">考试总分：{{ examData.total }}分</el-col>
					<el-col :span="12">及格分数：{{ examData.passScore }}分</el-col>
				</el-row>
				<dl v-for="(item, index) in examChapters" :key="index">
					<dt>{{ item.title }}</dt>
					<dd>
						<template v-for="(n, i) in item.children">
							<el-button size="mini" :type="n.analysis | buttonType" @click="handleLocateAnchor(`${index}${i}`)">{{ i + 1 }}</el-button>
						</template>
					</dd>
				</dl>
			</el-scrollbar>
			<div class="button">
				<el-button size="medium" @click="handleCloseDialog()">关闭</el-button>
			</div>
		</div>
		<el-scrollbar class="course_exam_subject">
			<subject-chapter v-if="examChapters.length > 0" :data="examChapters">
				<template slot-scope="{ data, index, anchor }">
					<subject-item :s-index="index" :anchor="`anchor${anchor}`" :data="data" disabled></subject-item>
				</template>
			</subject-chapter>
			<el-empty v-else :image="noexam" :image-size="150" description="暂无试题"></el-empty>
		</el-scrollbar>
		<div class="course_exam_button">
			<el-button size="medium" @click="handleCloseDialog()">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import subjectItem from '@/views/front/exam/subject';
import subjectChapter from '@/views/front/exam/chapter';
export default {
	components: { subjectChapter, subjectItem },
	data() {
		return {
			examData: {},
			answerData: [],
			examChapters: [],
			dialogVisible: false,
			noexam: require('@/assets/img/noexam.svg')
		};
	},
	filters: {
		buttonType(data) {
			let isRight = data.isRight;
			if (isRight === 'Y') {
				return 'success';
			} else if (isRight === 'N') {
				return 'danger';
			}
		}
	},
	mounted() {
		this.$bus.$on('showExamAnswer', (data, answers) => {
			let testPaper = data?.testPaper || {};
			let totalScore = testPaper.totalScore || '0.0';
			let chapterArr = testPaper.testPaperChapterList || [];
			this.answerData = [...answers];
			this.examData = { ...data, total: totalScore };
			this.examChapters = this.formatPaperData(chapterArr);
			this.dialogVisible = true;
		});
	},
	methods: {
		//格式化试卷题目
		formatPaperData(arr) {
			return arr.map((item) => {
				let chapter = { title: item.title };
				chapter['children'] = item.testSubjectVO.map((n, i) => {
					let subject = n.testSubjects || {};
					let obj = { id: n.id, title: subject.title };
					obj['answer'] = subject.type === '2' ? [] : '';
					obj['options'] = subject.subjectOptionsVOList || [];
					obj['analysis'] = this.formatAnswerAnalysis(subject);
					return { ...obj, score: n.score, subjectsType: subject.type };
				});
				return chapter;
			});
		},

		//格式化答案解析
		formatAnswerAnalysis(data) {
			return this.answerData.find((n) => n.id === data.id);
		},

		//关闭弹窗
		handleCloseDialog() {
			this.dialogVisible = false;
		},

		//点击定位锚点
		handleLocateAnchor(anchor) {
			let dom = document.querySelector(`#anchor${anchor}`);
			!!dom && dom.scrollIntoView({ behavior: 'smooth' });
		}
	}
};
</script>
<style lang="scss">
.course_exam_dialog {
	padding: 0 !important;
	.is-fullscreen {
		border-radius: 0;
	}
	.el-dialog__body {
		padding: 0 !important;
		flex-direction: row-reverse;
	}
}
@media screen and (max-width: 768px) {
	.course_exam_dialog .el-dialog__body {
		display: block !important;
	}
}
</style>
<style lang="scss" scoped>
.course_exam_subject::v-deep {
	flex: 1;
	height: 100% !important;
	background-color: #f0f0f0;
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.el-scrollbar__view {
		padding: 10px;
		box-sizing: border-box;
		&:has(.el-empty) {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
	}
}
.course_exam_content::v-deep {
	display: flex;
	flex-direction: column;
	width: 320px;
	flex-shrink: 0;
	box-sizing: border-box;
	height: 100% !important;
	border-left: solid 1px #ebeef5;
	.el-scrollbar {
		flex: 1;
		overflow: hidden;
	}
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.el-scrollbar__view {
		overflow: hidden;
	}
	.el-statistic {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		flex-shrink: 0;
		padding: 24px 0;
		background-color: #f5f5f5;
		border-bottom: solid 1px #ebeef5;
		.head {
			display: block;
			color: #909399;
			line-height: 1;
			margin-bottom: 10px;
		}
		.number {
			display: block;
			font-size: 48px;
			color: #303133;
			line-height: 0.65;
			font-family: 'ds-digital-bold';
		}
	}
	h1 {
		padding: 0 12px;
		font-size: 20px;
		margin-top: 12px;
	}
	.el-row {
		padding: 12px;
		color: #606266;
		border-bottom: solid 1px #ebeef5;
	}
	dl {
		margin-top: 20px;
		padding-left: 12px;
		dt {
			line-height: 1;
			font-weight: bold;
		}
		dd {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.el-button {
			font-size: 16px;
			padding: 5px 9px;
			margin: 12px 12px 0 0;
		}
	}
	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		padding: 16px;
		border-top: solid 1px #ebeef5;
		.el-button {
			width: 100%;
			font-size: 18px;
		}
	}
}
.course_exam_button {
	display: none;
}
@media screen and (max-width: 768px) {
	.course_exam_wrapper {
		height: auto;
		flex-direction: column;
	}
	.course_exam_content::v-deep {
		width: 100%;
		border-left: none;
		height: auto !important;
		.el-scrollbar__view {
			padding-bottom: 6px;
		}
		.el-statistic {
			padding: 20px 0;
		}
		.button {
			display: none;
			padding: 12px;
		}
		dl {
			display: none;
		}
	}
	.course_exam_subject::v-deep {
		height: auto !important;
		.el-scrollbar__view {
			padding: 0 0 6px;
		}
	}
	.course_exam_button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		padding: 12px;
		border-top: solid 1px #ebeef5;
		.el-button {
			width: 100%;
			font-size: 16px;
		}
	}
}
</style>
